/**
 * Charts1：仪表盘
 */
import React  from 'react'
import style from './index.less'
import echarts from 'echarts'

import {IECharts} from '../../../../components'

const Charts1=({
	name='仪表盘',
	value='50',
	height=300
})=>{
	const myProps={
		option : {
	    tooltip : {
	        formatter: "{a} <br/>{b} : {c}%"
	    },
			series: [
		      {
		        name: name,
		        type: 'gauge',
		        radius: 100,
		        detail: {
		          textStyle: {
		            color: '#000',
		            fontSize: 22,
		          },
		        },
						axisLabel: {
                fontSize:14,
            },
		        axisLine: {
		          lineStyle: {
		            width: 12,
		            color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
		              offset: 0,
		              color: 'rgb(68, 198, 255)',
		            }, {
		              offset: 1,
		              color: 'rgb(255, 70, 90)',
		            }])]],
		          },
		        },
		        splitLine: {
		          length: 12,
		        },
		        axisTick: {
		          length: 4,
		          lineStyle: {
		            opacity: 0.5,
		          },
		        },
		        pointer: {
		          width: 2,
		          length: '90%',
		        },
		        itemStyle: {
		          normal: {
		            color: '#d33',
		          },
		        },
		        title: {
		          textStyle: { color: '#888', fontSize: 16 },
		        },
		        data: [{value, name}]
		      },
		    ]
		}
	}
  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts1.propTypes={
	// data
}

export default Charts1
